import React from 'react'
import {connect} from 'dva'
import moment from 'moment'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message,Timeline,Collapse} from 'antd';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;
const MessageItem = ({routes, params, children, location, dispatch, messageItem}) => {
    const {list, editModel} = messageItem;

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18}
    };

    const callback = function (key) {
        //console.log(key);
    };

    return (
        <div>
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'开始时间'}>
                            <DatePicker />
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'结束时间'}>
                            <DatePicker />
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <Button type="primary" icon="search" >查询</Button>
                    </Col>
                </Row>
            </div>
            <Timeline pending={<a href="#">查看更多</a>}>
                <Timeline.Item color="red">2017-08-01 17:00
                   <p>
                       <Collapse accordion onChange={callback}>
                           <Panel header="客户【丑寅电商】状态改变" key="1">
                               <p>客户<a href="#">【丑寅电商】</a>已审核通过!</p>
                           </Panel>
                       </Collapse>
                   </p>
                </Timeline.Item>
                <Timeline.Item color="red">2017-08-02 16:00
                    <p>
                        <Collapse accordion onChange={callback}>
                            <Panel header="产品【桌子】状态改变" key="2">
                                <p>客户丑寅电商的产品<a href="#">【桌子】</a>已审核通过!</p>
                            </Panel>
                        </Collapse>
                    </p>
                </Timeline.Item>
                <Timeline.Item color="blue">2017-08-01 15:00
                    <p>
                        <Collapse accordion onChange={callback}>
                            <Panel header="开票人【丑寅电商】状态改变" key="3">
                                <p>客户丑寅电商的开票人<a href="#">【丑寅电商】</a>已审核通过!</p>
                            </Panel>
                        </Collapse>
                    </p>
                </Timeline.Item>
                <Timeline.Item color="blue">2017-08-02 14:00
                    <p>
                        <Collapse accordion onChange={callback}>
                            <Panel header="订单【0026-0001】状态改变" key="4">
                                <p>客户丑寅电商的订单<a href="#">【0026-0001】</a>状态为待通关审核!</p>
                            </Panel>
                        </Collapse>
                    </p>
                </Timeline.Item>
            </Timeline>
        </div>
    );
}




export default connect(({messageItem}) => ({messageItem}))(MessageItem)
